<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计分器</title>
    <style>
        body {
            background-color: #000;
            color: #fff;
            
        }

        .content {
            background: url(./images/liu_wei_yu.jpg) no-repeat;
            background-size: 100% 100%;
        }

        button {
            width: 80px;
            height: 50px;
            display: block;
            margin-bottom: 40px;
            background-color: rgba(255, 255, 255, 0.3);
        }

        header {
            display: flex;
            display: -webkit-flex;
            margin: 0 auto;
            justify-content: center;
            background-color: purple;
        }

        article {
            display: flex;
            display: -webkit-flex;
            justify-content: space-around;
            padding-top: 50px;
        }

        footer {
            position: relative;
        }

        footer div{
            position: absolute;
            bottom: 0;
            right: 0;
            color: rgb(94, 89, 89);
        }

        #hong {
            color: red;
        }
    </style>
</head>

<body>
    <header>
        <h1>
            <span id="hong">0</span> : <span id="lan">0</span>
        </h1>
    </header>
    
    <div class="content">
        <article>
            <div class="left">
                <button id="btn1">加1分</button>
                <button id="btn2">加2分</button>
                <button id="btn3">加3分</button>
                <button id="btn7">减1分</button>
            </div>
    
            <div class="right">
                <button id="btn4">加1分</button>
                <button id="btn5">加2分</button>
                <button id="btn6">加3分</button>
                <button id="btn8">减1分</button>
            </div>
        </article>
        <footer>
            <div>Bywq</div>
            <!-- 2021年11月18日19:04:49 今天tm离开系队... 留下点东西tm感觉
            我太菜压力... over salute -->
            <!-- 2022年10月3日20:54:57 好吧并没有退出, 牛队让我没有走, salute -->
        </footer>
    </div>


    <script>
        //alert("刷新可置零");
        //获取计分表
        var hong = document.getElementById("hong");
        var lan = document.getElementById("lan");


        //获取btn1
        var btn1 = document.getElementById("btn1");
        btn1.onclick = function () {
            hong.innerHTML = +hong.innerHTML + 1;
            //震动
            navigator.vibrate(150);
        }

        //获取btn2
        var btn2 = document.getElementById("btn2");
        btn2.onclick = function () {
            hong.innerHTML = +hong.innerHTML + 2;
            navigator.vibrate(150);
        }

        //获取btn3
        var btn3 = document.getElementById("btn3");
        btn3.onclick = function () {
            hong.innerHTML = +hong.innerHTML + 3;
            navigator.vibrate(150);
        }

        //获取btn4
        var btn4 = document.getElementById("btn4");
        btn4.onclick = function () {
            lan.innerHTML = +lan.innerHTML + 1;
            navigator.vibrate(150);
        }

        //获取btn5
        var btn5 = document.getElementById("btn5");
        btn5.onclick = function () {
            lan.innerHTML = +lan.innerHTML + 2;
            navigator.vibrate(150);
        }

        //获取btn6
        var btn6 = document.getElementById("btn6");
        btn6.onclick = function () {
            lan.innerHTML = +lan.innerHTML + 3;
            navigator.vibrate(150);
        }

        //获取btn7
        var btn7 = document.getElementById("btn7");
        btn7.onclick = function () {
            hong.innerHTML = +hong.innerHTML - 1;
            navigator.vibrate(150);
        }

        //获取btn8
        var btn8 = document.getElementById("btn8");
        btn8.onclick = function () {
            lan.innerHTML = +lan.innerHTML - 1;
            navigator.vibrate(150);
        }

        console.log(window.event);
    </script>
</body>

</html>